<template>
  <div class="container">
    <el-button
      type="text"
      size="small"
      icon="el-icon-back"
      v-if="breadshow"
      @click="$emit('back')"
    >返回学科</el-button>
    <el-button type="success" size="small" icon="el-icon-edit" @click="addshow">新增标签</el-button>
    <el-dialog :title="title" width="30%"  :visible.sync="directoryVisible" @close="close">
      <el-form :model="addData" ref="addref" :rules="addrules">
        <el-form-item label="所属学科" prop="subjectID" label-width="20%" v-if="!breadshow">
          <el-select v-model="addData.subjectID" placeholder="请选择">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="tagName" label="标签名称" label-width="20%">
          <el-input v-model.trim="addData.tagName" placeholder="请输入标签名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addDirectory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addTags, editeTags, detail } from '@/api/hmmm/tags'
import { getsimplesubject } from '@/api/hmmm/subjects'
export default {
  name: 'DirectorysAdd',
  props: {
    editeshow: {
      type: Number,
    },
    editedata: {
      type: [Object, String],
    },
    breadshow: {
      type: Boolean,
    },
  },
  data() {
    return {
      directoryVisible: false,
      title: '新增标签',
      addData: {},
      addrules: {
        tagName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
        subjectID: [{ required: true, message: '请输入所属学科名称', trigger: 'blur' }],
      },
      options: [],
      status1: 200,
    }
  },
  methods: {
    addDirectory() {
      this.$refs.addref.validate(async (valid) => {
        let msg = '添加标签成功'
        if (!valid) return
        if (this.editeshow) {
          msg = '修改标签成功'
          const editeQuery = {
            id: this.editedata.id,
            subjectID: this.addData.subjectID,
            tagName: this.addData.tagName,
          }
          const { status } = await editeTags(editeQuery)
          this.status1 = status
        } else {
          if (this.breadshow) {
            this.addData.subjectID = this.editedata.id
          }
          const { status } = await addTags(this.addData)
          this.status1 = status
        }
        if (this.status1 !== 200) {
          return this.$message.error('操作失败')
        }
        this.$message.success(msg)
        this.directoryVisible = false
        this.$emit('add')
      })
    },
    // 关闭
    close() {
      this.$refs.addref.resetFields()
      this.directoryVisible = false
      this.$emit('edite', 0)
    },
    async getDirectorys() {
      const { data, status } = await detail(this.editedata.id)
      if (status !== 200) {
        return this.$message.error('获取数据失败')
      }
      this.addData = data
      console.log(data)
    },
    async addshow() {
      this.directoryVisible = true
      this.getsubject()
    },
    async getsubject() {
      const { data, status } = await getsimplesubject()
      if (status !== 200) {
        return this.$message.error('请求所属学科数据失败')
      }
      this.options = data
    },
  },
  watch: {
    editeshow(val) {
      if (val === 1) {
        this.directoryVisible = true
        this.title = '修改标签'
        this.getDirectorys()
        this.getsubject()
        console.log(this.editedata)
      } else {
        this.title = '新增标签'
      }
    },
    breadshow(val) {
      if (val) {
        this.addData.subjectID = this.editedata.id
      }
    },
  },
}
</script>

<style scoped lang="less">
.dialog-footer {
  text-align: center;
}
.el-input,
.el-select{
  width: 88%;
}
</style>
